<template>
	<div class="goods-item" @click="toDetail">
		<div class="goods-images">
			<img class="goods-img" v-lazy="item.pic" />
			<div class="goods-flash-sale-ok">{{ item.shopName }}</div>
		</div>
		<div class="goods-content">
			<h2 class="goods-name">
				<svg-icon v-if="item.shoptype == 1" class="icon" iconName="tm"></svg-icon>
				<svg-icon v-if="item.shoptype == 0" class="icon" iconName="tb"></svg-icon>{{ item.title }}
			</h2>
			<div class="goods-info">
				<div class="discount">
					<div class="coupon">
						<div class="circle-left"></div>
						<div class="circle-right"></div>
						{{ item.couponMoney }}元券
					</div>
					<div class="subsidy">
						<div class="circle-left"></div>
						<div class="circle-right"></div>
						补贴¥{{ item.allowanceMoney | Fixed(2) }}
					</div>
				</div>
				<div class="sale">销量{{ item.sale | formatMyriadNum }}</div>
			</div>
			<div class="goods-price">
				<div class="deal">
					到手价
					<p>
						¥<span>{{ (item.endPrice - Number(item.allowanceMoney)) | Fixed(2) }}</span>
					</p>
				</div>
				<i class="line"></i>
				<div class="original">
					{{ item.shoptype === 0 ? '淘宝' : '天猫' }}
					<p>¥{{ item.price | Fixed(2) }}</p>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import store from 'store';
export default {
	name: 'GoodsItem',
	components: {},
	props: {
		item: {
			type: Object,
			default: () => {
				return {};
			}
		},
		type: {
			type: String,
			default: () => {
				return '';
			}
		}
	},
	data() {
		return {};
	},
	created() {},
	methods: {
		toDetail() {
			if (this.type === 'superGoods') {
				store.set('goodsInfo', this.item);
				this.$router.push({
					path: '/goods-detail',
					query: {
						superGoods: 1
					}
				});
			} else {
				this.$router.push({
					path: '/goods-detail',
					query: {
						gid: this.item.gid
					}
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.goods-item {
	width: 100%;
	background: $color-white;
	@include flexBox(space-between);
	.goods-images {
		width: 240px;
		height: 240px;
		border-radius: 8px;
		overflow: hidden;
		@include flexBox(center, center);
		position: relative;
		img {
			max-width: 100%;
			max-height: 100%;
		}
		.goods-flash-sale-ok {
			width: 100%;
			height: 60px;
			line-height: 60px;
			position: absolute;
			left: 0;
			bottom: 0;
			font-size: 24px;
			text-align: center;
			color: #fff;
			background: linear-gradient(360deg, rgba(88, 88, 88, 1) 0%, rgba(84, 84, 84, 0) 100%);
			border-radius: 0px 0px 16px 16px;
			@include ellipsis();
			.i {
				font-size: 26px;
			}
		}
	}
	.goods-content {
		height: 260px;
		flex: 1;
		margin-left: 30px;
		@include flexBox(space-between, null, column);
		.goods-name {
			font-size: 28px;
			line-height: 36px;
			color: $text-black;
			@include ellipsis(2);
		}
		.goods-info {
			margin-bottom: 30px;
			@include flexBox(space-between, center);
			.discount {
				height: 28px;
				display: flex;
				.coupon {
					line-height: 28px;
					padding: 0 18px;
					background: $main-color;
					border-radius: 4px;
					display: inline;
					font-size: 20px;
					color: $color-white;
					position: relative;
					margin-right: 20px;
				}
				.subsidy {
					line-height: 28px;
					padding: 0 18px;
					background: #ffeed1;
					border-radius: 4px;
					display: inline;
					font-size: 20px;
					color: #925114;
					position: relative;
				}
				.circle-left {
					width: 12px;
					height: 12px;
					background: #fff;
					position: absolute;
					border-radius: 50%;
					top: 50%;
					margin-top: -6px;
					left: -6px;
				}
				.circle-right {
					width: 12px;
					height: 12px;
					background: #fff;
					position: absolute;
					border-radius: 50%;
					top: 50%;
					margin-top: -6px;
					right: -6px;
				}
			}
			.sale {
				font-size: 20px;
				color: $text-grey;
			}
		}
		.goods-price {
			color: $text-grey-default;
			font-size: 24px;
			@include flexBox(null, center);
			.line {
				/* prettier-ignore */
				width: 1PX;
				height: 30px;
				background: $text-grey-default;
				margin: 0 20px;
			}
			.deal {
				p {
					color: $main-color;
					font-weight: 600;
					span {
						font-size: 32px;
					}
				}
			}
			.original {
				p {
					margin-top: 8px;
				}
			}
		}
	}
}
</style>
